<template xmlns:placehoder="http://www.w3.org/1999/xhtml">
    <div style="position: absolute;width: 100%;height: 100%;" >


    <div style="position: sticky;top:0px;z-index: 999">
        <div style="height: 60px;background-color: rgb(251,251,251);">
            <div class="PersonalCenter">
                <a href="/mother/editMaterial/articleEdit" > <i class="el-icon-arrow-left"></i> 文章管理</a>
            </div>
            <div class="title">
                <input v-model="article.name" type="text" placeholder="为你的文章设置一个标题吧">
            </div>
            <div class="release">
                    <el-button type="primary" style="width: 100px;height: 40px;border-radius: 23px;font-size: 14px;margin-left: 10px"  @click="handleEdit">
                      <i class="el-icon-position" ></i> 发布文章</el-button>
            </div>

            <div class="touxiang" >
                <el-dropdown style=" cursor: pointer; text-align: center" placement="bottom">
                    <div style="display: inline-block">
                        <img :src="user.avatar" alt=""
                             style="width: 40px; height: 40px;border-radius: 50%;margin-top: 10px">
                    </div>
                    <el-dropdown-menu slot="dropdown" style="width: 100px;margin-left: 10px; text-align: center">
                        <router-link to="/mother/editMaterial/ArticleCommand" style="text-decoration: none">
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                博客管理
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/mother"  style="text-decoration: none;">
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span>返回首页</span>
                            </el-dropdown-item>
                        </router-link>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div >
    </div>


    <div style="width: 100%;height: 100%;">
        <div style="height: 100%;width: 100%">
            <mavon-editor ref="md" style="height: 100%;width: 100%" v-model="article.content" :ishljs="true" :scrollStyle="true"  @imgAdd="imgAdd"/>
        </div>
    </div>
        <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="30%" fullscreen="true">
            <el-form label-width="80px"   ref="article" :model="article">

                <el-form-item label="文章类型" >
                    <el-select v-model="article.tid" placeholder="请选择">
                        <el-option
                                v-for="item in  articleTypes"
                                :key="item.id"
                                :label="item.agetext"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章概述" >
                    <el-input type="textarea" rows="5" maxlength="50" show-word-limit v-model="article.summary" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="width: 70px;height: 40px "  @click="dialogFormVisible = false">取 消</el-button>
                <el-button style="width: 70px;height: 40px "  type="primary"  @click="handleSave">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import request from "@/router/request";

    export default {
        name: "ArticleRelease",
        data(){
            return {
                textarea:"请输入标题",
                user: sessionStorage.getItem("user1") ? JSON.parse(sessionStorage.getItem("user1")) : {username:""},
                article:{
                },
                dialogFormVisible:false,
                articleTypes:[],
            }
        },
        created() {
            this.loadArticleType()
        },
        methods:{
            handleSave(){
                const form = this.article
                form.uid = this.user.id
                form.user=this.user.nickName
              console.log("asdasdsaadsdas:"+this.user.id)
              console.log(form)
                request.post("/article",form).then(res =>{
                    console.log(res)
                    if(res){
                        this.$message.success("发布成功，请到个人中心查看！")
                        this.$router.push("/mother")
                    }else{
                        this.$message.error("发布失败！")
                    }
                    this.dialogFormVisible = false,
                        this.form = {}
                    this.load()
                })
            },
            imgAdd(pos, $file) {
                let $vm = this.$refs.md
                // 第一步.将图片上传到服务器.
                const formData = new FormData();
                formData.append('file', $file);
                request({
                    url: '/files/upload',
                    method: 'post',
                    data: formData,
                    headers: {'Content-Type': 'multipart/form-data'},
                }).then((res) => {
                    // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
                    $vm.$img2Url(pos, res.data);
                })
            },
            handleEdit(){
                    this.dialogFormVisible = true//打开

            },
            loadArticleType(){
                request.get("/type").then(res=>{
                    this.articleTypes = res.data
                })
            },
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }

    .PersonalCenter{
        float: left;
        width: 150px;
        height: 100%;
        margin-left: 20px;
        text-align: center;
        line-height: 60px;
        color: #3F5EFB;
        font-size: 20px;


    }
    a{
        text-decoration:none;
        color: #409EFF;
    }
    .title{
        float: left;
        height: 100%;
        width: 800px;
        text-align: center;
        line-height: 60px;
        margin-left: 50px;

    }
    .title input{
        width: 100%;
        height: 40px;
        border-radius: 20px;
        border:0px;
        color: #ccc;
        padding:0px 20px;
        font-size: 20px;
        outline: none;
        overflow: auto;
        border: 1px solid  #409EFF ;
    }
    .title input:focus{
        outline: 1px solid #409EFF;
    }
    .release{
        float: left;
        width:250px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        margin-left: 10px;
    }
    .touxiang{
        float: left;
        margin-left: 5px;
        height: 100%;
        width: 10px;
    }

</style>
